<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getTestDetailById, getTestResult, getTestResult02 } from '@/services/healthTest.ts'
import type { TestDetail, TestResult } from '@/types/healthTest'

// 获取页面参数
const query = defineProps<{
  htId: string
  testTitle: string
}>()
// 定义数据
const messageList = ref<TestDetail[]>([])
const testResult = ref<TestResult>()

const select = async () => {
  showIndex.value = 0
  uni.setNavigationBarTitle({
    title: query.testTitle,
  })
  const res = getTestDetailById(query.htId)
  messageList.value = (await res).data
}

const isChecked = (): boolean => {
  return messageList.value.every((item) => item.htResult !== null)
}
const isOneChecked = (item: number): boolean => {
  return messageList.value[item].htResult !== null
}

const testSubmit = async () => {
  if (isChecked()) {
    console.log(messageList.value)
    const res = await getTestResult02(messageList.value)
    console.log(res)

    uni.navigateTo({
      url: `/pages/health/componets/ResultShow?testResultTitle=${res.data.testResultTitle}&testResult=${res.data.testResult}`,
    })
  } else {
    uni.showToast({
      title: '选项存在空缺',
      icon: 'error',
    })
  }
}

const list = [
  {
    id: 35,
    htId: 'HT2',
    htQuestion: '我的人生观是',
    questionA: 'A人生的体验越多越好，所以想法很多，有可能就应该多尝试。',
    questionB: 'B深度比宽度更重要，目标要谨慎，一旦确定就坚持到底。',
    questionC: 'C人生必须有所成。',
    questionD: 'D没必要太辛苦，好好活着就行。',
    questionY: null,
    questionN: null,
    htType: '1',
    htResult: null,
  },
  {
    id: 36,
    htId: 'HT2',
    htQuestion: '如果野外旅行，在下山返回的路线上，我更在乎：',
    questionA: 'A要好玩有趣，不愿重复，所以宁愿走新路线。',
    questionB: 'B要安全稳妥，担心危险，所以宁愿走原路线。',
    questionC: 'C要挑战自我，喜欢冒险，所以宁愿走新路线。',
    questionD: 'D要方便省心，害怕麻烦，所以宁愿走原路线。',
    questionY: null,
    questionN: null,
    htType: '1',
    htResult: null,
  },
  {},
]
const nextData = () => {
  if (showIndex.value < 29) {
    if (isOneChecked(showIndex.value)) {
      showIndex.value++
    } else {
      uni.showToast({
        title: '请选择',
        icon: 'error',
      })
    }
  }
}
const lastData = () => {
  if (showIndex.value > 0) {
    showIndex.value--
  }
}
const showIndex = ref<number>()

onMounted(select)
</script>
<template>
  <view class="box">
    <view class="bb" v-for="(value, index) in messageList" :key="index">
      <view class="yycs" v-if="index === showIndex">
        <view class="text" v-if="index === showIndex">{{
          index + 1 + ',' + value.htQuestion
        }}</view>
        <uni-data-checkbox
          class="que"
          v-model="value.htResult"
          mode="list"
          icon="right"
          :localdata="[
            { text: value.questionA, value: 1 },
            { text: value.questionB, value: 2 },
            { text: value.questionC, value: 3 },
            { text: value.questionD, value: 4 },
          ]"
          v-if="index === showIndex"
        ></uni-data-checkbox>
      </view>
    </view>
    <view class="choice">
      <view class="last" @click="lastData">
        <text class="l">上一题</text>
      </view>
      <view class="next" @click="nextData" v-if="showIndex !== 29">
        <text class="n">下一题</text>
      </view>
      <view class="subtest" v-if="showIndex === 29" @tap="testSubmit">查看测试结果</view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
::v-deep.checklist-content {
  .checklist-text {
    margin: 10rpx 0 !important;
  }
}

.box {
  background-color: #b3add3;
  padding: 25px;
  background-image: url('@/static/images/问卷背景.jpg');
  height: 100vh;
  background-size: cover;

  .yycs {
    background-color: #d8dbf3;
    padding: 20px;
    margin-bottom: 12px;
    margin-top: 80px;
    //height: 50vh;

    .text {
      color: #7b4ab8;
      font-weight: bold;
      font-size: 40rpx;
    }

    .que {
      margin: 20rpx 0 !important;
    }

    //
    //.que {
    //  padding-top: 25px;
    //  margin-top: 10px;
    //  height: 40vh;
    //  font-size: 350rpx;
    //  line-height: 200rpx;
    //
    //
    //}
  }

  .choice {
    display: flex;

    .last {
      text-align: center;
      flex-basis: 50%;

      .l {
        height: 60rpx;
        line-height: 60rpx;
        display: inline-block;
        background-color: #9e839e;
        width: 200rpx;
        border-radius: 15px;
      }
    }

    .next {
      flex-basis: 50%;
      text-align: center;

      .n {
        height: 60rpx;
        line-height: 60rpx;
        display: inline-block;
        background-color: #768cc5;
        width: 200rpx;
        border-radius: 15px;
      }
    }
  }

  .subtest {
    height: 60rpx;
    line-height: 60rpx;
    display: inline-block;
    background-color: #db6732;
    width: 280rpx;
    border-radius: 15px;
    text-align: center;
  }
}
</style>
